<template>
  <div class="echartsPage">
    <div id="main"></div>
  </div>
</template>

<script setup>
import { useGlobal } from '@/hooks/system/useGlobal'
const { $nextTick } = useGlobal()

const option = {
  // title: {
  //     subtext: "单位：个",
  //     subtextStyle: {
  //         color: "#fff",
  //     },
  //     right: 5,
  // },
  //   tooltip: {
  //                 trigger: "item",
  //                 formatter: "{a} <br/>{b} : {c} ({d}%)",
  //             },
  // legend: {
  //     top: 'center',
  //     right: "8%",
  //     orient: 'vertical',
  //     textStyle: {
  //         color: "#fft",
  //     },
  // },
  color: ['#4084FA', '#F54891', '#A859FF', '#F59C00'],
  series: [
    {
      type: 'pie',
      radius: ['0%', '50%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        formatter: '{b}{c}%',
        textStyle: {
          color: '#1194FE',
        },
      },
      emphasis: {
        label: {
          show: true,
        },
      },
      labelLine: {
        normal: {
          length: 20,
          length2: 30,
          lineStyle: {
            width: 1,
          },
        },
      },
      data: [
        { value: 30, name: '延时一月' },
        { value: 20, name: '延时半年' },
        { value: 10, name: '延时一年' },
        { value: 30, name: '延时一年以上' },
      ],
    },
  ],
}

$nextTick(() => {
  const chartDom = document.getElementById('main')
  const myChart = echarts.init(chartDom)
  option && myChart.setOption(option, true)
})
</script>

<style scoped>
.echartsPage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
#main {
  margin: 0 auto;
  border: 1px solid #c7c7c7;
  width: 800px;
  height: 50%;
  background-color: #fff;
}
</style>
